<template>
  <div>
    <el-card class="box-card notice_bulletin">
      <div slot="header" class="notice_title">
        <span>系统公告</span>
      </div>
      <div
        v-for="item in noticeList"
        :key="item.id"
        class="notice_context item"
      >
        <div>
          {{ item.title }}
        </div>
        <div>
          <i :class="`el-icon-${item.icon}`"> {{ item.time }}</i>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "notice",
  data() {
    return {
      noticeList: []
    };
  },
  methods: {
    getNotice() {
      this.$http.post("/notice/getList/Index").then((res) => {
        this.noticeList = res;
      });
    },
  },
  mounted() {
    this.getNotice();
  },
};
</script>

<style lang="less" scoped>
.notice_bulletin {
  .notice_title {
    font-size: 22px;
    color: #000000;
  }

  .notice_context {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border: 1px #f2f2f2 solid;
    display: flex;
    justify-content: space-between;
    align-content: center;
  }
}
</style>
